<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.css" rel="stylesheet">
<!-- 引入主题样式 -->
<link href="themes/gray/easyui.css" rel="stylesheet">
<!-- 引入图标的样式 -->
<link href="themes/icon.css" rel="stylesheet">
<!-- 先引入jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!-- 引入easyui -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<style type="text/css">
body{      
        background-image: url('picture/login.jpg');      
        background-size:cover;    
     }
#notify{
	margin-top: 33%;
	border-radius: 20px;
	width: 400px;
	height: 300px;
	border: 1px solid;
}
#div_login {
	margin-top: 45%;
	border-radius: 20px;
	width: 370px;
	height: 370px;
	box-shadow: 10px 10px 30px #cccccc;
	background-color: #FAEBD7;
}
#sub{
	width: 150px;
	height: 40px;
	border-radius: 5px;
}
</style>
<script type="text/javascript">
	$(function() {
		$('#uname').textbox({
			iconCls : 'icon-man',
			iconAlign : 'left',
			height : 40
		})
		$('#upsw').textbox({
			iconCls : 'icon-lock',
			iconAlign : 'left',
			height : 40
		})
		$('#check').textbox({
			height : 40
		})
	})
</script>
</head>
<body>
	<div class="container">
		<div class="row" style="z-index: 99999;">
			<div class="col-md-7">
				<div id="notify" style="background-color: white;">
					<div align="center">
						<h2>通知</h2>
					</div>
					<hr>
					<ul id="person"></ul>
				</div>
			</div>
			<div class="col-md-5">
				<div id="div_login" align="center">
					<div>
						<br>
						<h1>登录</h1>
						<form action="login" method="post">
							账&nbsp;&nbsp;号：<input id="uname" name="uname" type="text" style="width: 300px"><br>
							<br> 密&nbsp;&nbsp;码：<input id="upsw" name="upsw" type="password"
								style="width: 300px"><br>
							<br> 验证码：<input id="check" name="check" type="text" style="width: 120px">
							<img id="imageCode" alt="" src="createImage"> <a
								href="javascript:reloadCode();"
								style="font-size: 18px; font-family: '宋体'">看不清</a>
								<br><span>${loginMsg }</span>
							<br><input id="sub" type="submit" value="登录"/>
						</form>
					</div>
				</div>
			</div>
		</div>
</div>
	
	<script type="text/javascript">
		//处理验证码看不清的情况
		function reloadCode() {
			//定义变量 对请求刷新，根据时间的不同，请求不同
			var time = new Date().getTime();
			document.getElementById("imageCode").src = "createImage?id=" + time;
		}
		
		$(function(){
			var i = 1;
			var ws = new WebSocket("ws://172.18.23.232:8080/System4/socket");
			ws.onmessage = function(e){
				if(i>9){
					$("#"+(i-9)).remove();
				}
				$("#person").append("<li id='"+i+"'>"+e.data+"</li>");
				i++;
			}
		})
	</script>
</body>
</html>